<template>
  <div id="app">
    <div class="top" >
      <div class="top_icon" @click="showNav"><i class="el-icon-s-fold"></i></div>
      <div class="top_img">
        <img src="../src/assets/logo.png">
      </div>
      <div class="top_nav" id="nav">
        <ul>
          <li class="li" v-for="index in navArr1" :key="index.go">
            <a :href="index.go">{{index.name}}</a>
          </li>
        </ul>
      </div>
    </div>
    <router-view/>
    <!-- 使用返回顶部 组件 -->
    <retuen
        transitionName="fade"
        :customStyle="myBackToTopStyle" 
        :visibilityHeight="100" 
        :backPosition="0"
      ></retuen>
    <div class="appFoot">
      <div class="appFoot_left">
        <h5><a href="">关于公司</a></h5>
        <h5><a href="">联系我们</a></h5>
        <h5> <a href="">公司邮箱</a></h5>
        <h5> <a href="">公司电话</a></h5>
        <h5> <a href="">常问问题</a></h5>
        <h5> <a href="">热线：400-000-0000</a></h5>
        <h5> <a href="">地址：上海松江区广富林路658号202号1820室</a></h5>
      </div>
      <div class="appFoot_right">
        <h5><a href="">关于我们</a></h5>
        <h5><a href="">公司简介</a></h5>
        <h5> <a href="">加入我们</a></h5>
        <h5> <a href="">企业意愿</a></h5>
        <h5> <a href="">行业资讯</a></h5>
        <h5> <a href="">公司新闻</a></h5>
        <h5> <a href="">在线留言</a></h5>
      </div>
      <h6>*Ordering / purchasing vodka requires an appointment in our ftjs cellar. Please contact us by telephone or
      email to arrange the time.2012 – 2021} Barker / Nana weekend website</h6>
    </div>
  </div>
</template>

<script>
// 引入返回顶部 组件
import retuen from '@/components/return.vue'
export default {
  name: 'App',
  data() {
    return {
      show : false,
      navArr1: [{
            name: '首页',
            go: '#/home'
          },
          {
            name: '走进公司',
            go: '#/about'
          },
          {
            name: '产品中心',
            go: '#/product'
          },
          {
            name: '企业动态',
            go: '#/news'
          },
          {
            name: '联系我们',
            go: '#/relation'
          },
          {
            name: '致敬',
            go: ''
          },
        ],
        // 按钮的样式
        myBackToTopStyle: {
          'right': '100px',
          'bottom': '150px',
          'width': '40px',
          'height': '40px',
          'border-radius': '20px',
          'line-height': '40px', 
          'background': '#fff'
        },
    }
  },
  // 声明 组件
  components: {
    retuen
  },
  methods: {
    // 创建一个方法，来控制导航栏的显示和隐藏
    showNav:function() {
      // 获取id为nav赋值给 nav
      const nav = document.getElementById('nav');
      // 判断show 为false，给导航栏样式 隐藏，然后返回 show 为 true
      if(this.show == false) {
        nav.style.display = "block";
        this.show = true
      }else {
      // show 为 true 就给导航栏样式 显示
        nav.style.display = "none";
        this.show = false
      }
    }
  },
}
</script>

<style>
body{
  margin: 0;
  padding: 0;
  max-width: 100%;
  background-color: #fff;
  background-size: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: auto;
}

.top {
  max-width: 100%;
  display: flex;
  text-align: left;
  padding: 20px;
}

.top_img {
  width: 20%;
  height: 50px;
  line-height: 50px;
  margin-left: 50px;
}
.top_img img {
  width: 200px;
  margin-left: 50px;
}

.top_nav {
  width: 60%;
  line-height: 30px;
  flex: 1;
  text-align: center;
}

ul {
  padding: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.li {
  margin-left: 20px;
  margin-right: 20px;
  /* 去小数点 */
  list-style: none;
  width: 80px;
  transition: 0.2s all linear;
}

.li a {
  color: black;
  text-decoration: none;
}

.li:hover {
  width: 80px;
  border-bottom: 1px solid #660000;
}

.appFoot {
    width: 100%;
    height: auto;
    background:fff;
    display: flex;
  }

  .appFoot_left,
  .appFoot_right {
    width: 30%;
    margin: 30px;

  }

  .appFoot_left {
    margin-left: 20%;
  }
  .appFoot_right {
    margin-right: 20%;
  }

  .appFoot a {
    color: black;
    text-decoration: none;
  }
  .appFoot h5{
    padding: 10px;
  }
  .appFoot h6{
    width: 100%;
    position: absolute;
    text-align: center;
    color: black;
    margin-top: 500px;
  }
  /* 窗口小于1800 */
  @media only screen and (max-width: 1800px) {

  }

  /* 窗口小于1024 */
  @media only screen and (max-width: 1024px) {
    #app {
      max-width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
    }
    .top {
      display: flex;
      text-align: left;
      padding: 20px;
    }
    .top_img {
      height: 40px;
      margin-left: 50px;
      text-align: center;
    }
    .top_nav {
      line-height: 30px;
      flex: 1;
      text-align: center;
    }

    ul {
      padding: 0;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
    }

    .li {
      margin-left: 10px;
      margin-right: 10px;
      font-size: 1.2rem;
      font-weight: 600;
      width: 80px;
      transition: 0.2s all linear;
    }

    .li a {
      color: black;
      text-decoration: none;
    }

    .li:hover {
      width: 100%;
      background: coral;
    }


    .appFoot {
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
    .appFoot_left,
    .appFoot_right {
      width: 50%;
      margin: 0;
      padding: 0;
    }

    .appFoot a {
      color: black;
      text-decoration: none;
    }
    .appFoot h5{
      font-size: 1rem;
      padding: 10px;
    }
    .appFoot h6{
      width: 100%;
      font-size: 1rem;
      position: absolute;
      text-align: center;
      color: black;
      margin-top: 350px;
    }
  }
  @media only screen and (min-width: 700px) {
    .top_icon {
      display: none;
    }
  }
  /* 窗口小于768 */
  @media only screen and (max-width: 768px) {
    #app {
      max-width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
    }
    .top {
      display: flex;
      text-align: left;
      padding: 20px;
    }
    .top_img {
      height: 40px;
      margin-left: 50px;
      text-align: center;
    }
    .top_nav {
      line-height: 30px;
      flex: 1;
      text-align: center;
    }

    ul {
      padding: 0;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
    }

    .li {
      margin-left: 20px;
      margin-right: 20px;
      font-size: 1.2rem;
      font-weight: 600;
      width: 80px;
      transition: 0.2s all linear;
    }

    .li a {
      color: black;
      text-decoration: none;
    }

    .li:hover {
      width: 100%;
      background: coral;
    }


    .appFoot {
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
    .appFoot_left,
    .appFoot_right {
      width: 50%;
      margin: 0;
      padding: 0;
    }

    .appFoot a {
      color: black;
      text-decoration: none;
    }
    .appFoot h5{
      font-size: 1rem;
      padding: 10px;
    }
    .appFoot h6{
      width: 100%;
      font-size: 1rem;
      position: absolute;
      text-align: center;
      color: black;
      margin-top: 350px;
    }
  }

  /* 窗口小于480 */
  @media only screen and (max-width: 480px) {
    #app {
      max-width: 480px;
      height: auto;
      margin: 0;
      padding: 0;
    }
    .top {
      display:list-item;
      text-align: left;
      padding: 0;
    }
    /* 初始导航栏 隐藏 */
    #nav{
      display: none;
    }
    .top_img {
      height: 40px;
      margin-left: 18px;
      text-align: center;
    }
    .top_icon {
      display: list-item;
      float: right;
      font-size: 30px;
      position: static;
    }
    .top_nav {
      width: 100%;
      line-height: 30px;
      flex: 1;
      text-align: center;
    }

    ul {
      padding: 0;
      align-items: center;
      justify-content: center;
      display: list-item;
      flex-wrap: wrap;
    }

    .li {
      margin: 0 auto;
      width: 100%;
      transition: 0.2s all linear;
    }

    .li a {
      color: black;
      text-decoration: none;
    }

    .li:hover {
      width: 100%;
      background: coral;
    }


    .appFoot {
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
    .appFoot_left,
    .appFoot_right {
      width: 50%;
      margin: 0;
      padding: 0;
    }

    .appFoot a {
      color: black;
      text-decoration: none;
    }
    .appFoot h5{
      font-size: 1rem;
      padding: 10px;
    }
    .appFoot h6{
      width: 100%;
      font-size: 1rem;
      position: absolute;
      text-align: center;
      color: black;
      margin-top: 350px;
    }
  }
</style>
